<template>
	<div class="m-page-main " style="height: auto;">
		<ul class="msg-list">
			<li v-for="item in cmsmessagelist" :key="item.id" style="margin-top: 8px;">
				<div class="title">
					{{ item.title }}
					<span>{{ item.createtime }}</span>
				</div>
				<divider></divider>
				<div class="meta">{{ item.content }}</div>
			</li>
			<li v-if="!loading && cmsmessagelist.length == 0">暂无消息</li>
		</ul>
		<Pagination class="mu-page" :hide-on-single-page="true" background layout="prev, pager, next" :total="total"></Pagination>
	</div>
</template>
<script>
import { Divider, Pagination } from 'element-ui';
import { cmsmessagelist } from '../../api/index.js';

export default {
	components: {
		Divider,
		Pagination
	},
	data() {
		return {
			total: 0,
			loading: false,
			cmsmessagelist: []
		};
	},
	created() {
		this.loading = true
		cmsmessagelist({})
			.then(res => {
				this.cmsmessagelist = res.data.data.rows;
				this.total = res.data.data.total
				this.loading = false
			})
			.catch(res => {
				console.log(res);
			});
	}
};
</script>
<style scoped>
.m-page-main {
	width: 995px;
	float: right;
	margin-right: 2px;
}

.msg-list li {
	color: #7d7d7d;
	font-size: 18px;
	border-radius: 10px;
	background-color: rgb(255, 255, 255);
	box-shadow: 2.5px 4.33px 10px 0px rgb(0, 0, 0, 0.2);
	padding: 25px 30px 25px;
}
.title {
	color: #313131;
}
.title span {
	font-size: 16px;
	color: #7d7d7d;
	float: right;
}
.meta {
	line-height: 40px;
}
.mu-page {
	padding: 20px 0;
}
</style>
